// 元素列表 
import React from 'react'
import { View, Text, Image } from '@tarojs/components'
import './ElemList.less'

type Props = {
  elements: any[]
  selectedId: string | null
  onSelect: (id: string) => void
  toTop: (id: string) => void
  toBottom: (id: string) => void
  moveElement: (id: string, dir: 'up' | 'down') => void
  duplicate: (id: string) => void
  toggleLock: (id: string) => void
  toggleHide: (id: string) => void
  deleteElement: (id: string) => void
  onCrop?: (id: string) => void
  onCutout?: (id: string) => void
}

const ElemList: React.FC<Props> = ({ elements, selectedId, onSelect, toTop, toBottom, moveElement, duplicate, toggleLock, toggleHide, deleteElement, onCrop, onCutout }) => {
  // 组件职责：渲染元素列表，提供选择/置顶/置底/上移/下移/复制/锁定/隐藏/删除等操作的 UI
  // 注意：所有操作均通过 props 回调抛出，组件本身不持有额外状态，便于单元测试与状态管理集中化
  return (
    <View className='elem-list-component'>
      {/* 列表容器 */}
      <View className='elem-list'>
        {elements.map((el: any, idx: number) => {
          const isActive = selectedId === el.id
          const isFirst = idx === 0
          const isLast = idx === elements.length - 1

          // 列表项：左侧缩略，右侧操作按钮组
          return (
            <View key={el.id} className={`elem-item ${isActive ? 'selected' : ''}`} onClick={() => onSelect(el.id)}>
              {/* 缩略图：根据类型展示图片或简短文本 */}
              <View className='elem-thumb'>
                {el.type === 'image' && <Image src={el.src} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />}
                {el.type === 'icon' && <Image src={el.src} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />}
                {el.type === 'text' && (
                  <View style={{ padding: 6 }}>
                    <Text style={{ fontSize: 12, color: '#666' }}>{(el.text || '').slice(0, 24)}</Text>
                  </View>
                )}
              </View>

              {/* 操作按钮组：根据是否选中和是否为首/尾项控制可用性 */}
              <View className='elem-actions'>
                {/* 置顶/置底：第一个元素不可置顶、最后一个元素不可置底；点击时先阻止事件冒泡并确保选中 */}
                <View
                  className={`elem-actions-item-btn ${(isActive && !isFirst) ? '' : 'disabled'}`}
                  onClick={(e: any) => {
                    e.stopPropagation && e.stopPropagation()
                    if (!isActive) onSelect(el.id)
                    if (isActive && !isFirst) toTop(el.id)
                  }}
                >置顶</View>
                <View
                  className={`elem-actions-item-btn ${(isActive && !isLast) ? '' : 'disabled'}`}
                  onClick={(e: any) => {
                    e.stopPropagation && e.stopPropagation()
                    if (!isActive) onSelect(el.id)
                    if (isActive && !isLast) toBottom(el.id)
                  }}
                >置底</View>
                <View className={`elem-actions-item-btn ${(isActive && !isFirst) ? '' : 'disabled'}`} onClick={(e: any) => { e.stopPropagation && e.stopPropagation(); if (!isActive) onSelect(el.id); if (isActive && !isFirst) moveElement(el.id, 'up') }}>上移</View>
                <View className={`elem-actions-item-btn ${(isActive && !isLast) ? '' : 'disabled'}`} onClick={(e: any) => { e.stopPropagation && e.stopPropagation(); if (!isActive) onSelect(el.id); if (isActive && !isLast) moveElement(el.id, 'down') }}>下移</View>
                <View className={`elem-actions-item-btn ${isActive ? '' : 'disabled'}`} onClick={() => isActive && duplicate(el.id)}>复制</View>
                <View className={`elem-actions-item-btn ${isActive ? '' : 'disabled'}`} onClick={() => isActive && toggleLock(el.id)}>{el.locked ? '解锁' : '锁定'}</View>
                <View className={`elem-actions-item-btn ${isActive ? '' : 'disabled'}`} onClick={() => isActive && toggleHide(el.id)}>{el.hidden ? '显示' : '隐藏'}</View>
                {/* 图片/文本：剪裁按钮；图片专用抠图 */}
                {(el.type === 'image' || el.type === 'text') && (
                  <View className={`elem-actions-item-btn ${isActive ? '' : 'disabled'}`} onClick={(e: any) => { e.stopPropagation && e.stopPropagation(); if (!isActive) onSelect(el.id); typeof (onCrop as any) === 'function' && (onCrop as any)(el.id) }}>剪裁</View>
                )}
                {el.type === 'image' && (
                  <View className={`elem-actions-item-btn ${isActive ? '' : 'disabled'}`} onClick={(e: any) => { e.stopPropagation && e.stopPropagation(); if (!isActive) onSelect(el.id); typeof (onCutout as any) === 'function' && (onCutout as any)(el.id) }}>抠图</View>
                )}
                <View className={`elem-actions-item-btn ${isActive ? 'delete' : 'disabled'}`} onClick={() => isActive && deleteElement(el.id)}>删除</View>
              </View>
            </View>
          )
        })}
      </View>
    </View>
  )
}

export default ElemList


